<?php
require_once 'common/config.php';
require_once 'common/functions.php';

// 检查登录状态
check_login();

$db = db_connect();

// 获取帖子ID
$id = isset($_GET['id']) ? intval($_GET['id']) : 0;
if (!$id) {
    redirect('posts.php', '无效的帖子ID', 'error');
}

// 获取帖子详情
$stmt = $db->prepare("
    SELECT p.*, u.name as user_name, u.avatar as user_avatar 
    FROM posts p 
    LEFT JOIN users u ON p.user_id = u.id 
    WHERE p.id = ?
");
$stmt->execute([$id]);
$post = $stmt->fetch();

if (!$post) {
    redirect('posts.php', '帖子不存在', 'error');
}

// 获取帖子评论
$stmt = $db->prepare("
    SELECT c.*, u.name as user_name, u.avatar as user_avatar 
    FROM comments c 
    LEFT JOIN users u ON c.user_id = u.id 
    WHERE c.post_id = ? 
    ORDER BY c.created_at DESC
");
$stmt->execute([$id]);
$comments = $stmt->fetchAll();
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帖子详情 - <?php echo SITE_NAME; ?></title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
    .post-detail {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        padding: 25px;
        margin-bottom: 30px;
    }

    .post-title {
        font-size: 24px;
        color: #2c3e50;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }

    .post-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 6px;
    }

    .user-info {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .avatar-container {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .avatar-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .user-name {
        font-weight: 600;
        color: #34495e;
    }

    .post-stats {
        display: flex;
        gap: 20px;
    }

    .stat-item {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #7f8c8d;
    }

    .post-content {
        margin: 25px 0;
    }

    .post-image {
        margin-bottom: 20px;
        text-align: center;
    }

    .post-image img {
        max-width: 100%;
        max-height: 400px;
        width: auto;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .post-image img:hover {
        transform: scale(1.02);
    }

    .post-text {
        line-height: 1.8;
        color: #2c3e50;
        font-size: 16px;
    }

    .comments-section {
        margin-top: 30px;
    }

    .comments-header {
        font-size: 20px;
        color: #2c3e50;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

    .comment-item {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 15px;
        transition: transform 0.2s ease;
    }

    .comment-item:hover {
        transform: translateX(5px);
    }

    .comment-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

    .comment-content {
        color: #34495e;
        line-height: 1.6;
    }

    .comment-actions {
        margin-top: 10px;
        text-align: right;
    }

    .post-actions {
        display: flex;
        gap: 10px;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }

    .btn {
        padding: 10px 20px;
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .btn:hover {
        transform: translateY(-2px);
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <?php include 'includes/sidebar.php'; ?>
        
        <div class="main-content">
            <div class="content">
                <div class="post-detail">
                    <h1 class="post-title"><?php echo htmlspecialchars($post['title']); ?></h1>
                    
                    <div class="post-meta">
                        <div class="user-info">
                            <div class="avatar-container">
                                <img src="<?php echo $post['user_avatar'] ? '../api/user/' . $post['user_avatar'] : 'assets/images/default-avatar.png'; ?>" 
                                     alt="<?php echo htmlspecialchars($post['user_name']); ?>">
                            </div>
                            <div>
                                <div class="user-name"><?php echo htmlspecialchars($post['user_name']); ?></div>
                                <div class="post-time">
                                    <i class="far fa-clock"></i>
                                    <?php echo date('Y-m-d H:i', strtotime($post['created_at'])); ?>
                                </div>
                            </div>
                        </div>
                        <div class="post-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span><?php echo number_format($post['view_count']); ?> 浏览</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-thumbs-up"></i>
                                <span><?php echo number_format($post['like_count']); ?> 点赞</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span><?php echo number_format($post['comment_count']); ?> 评论</span>
                            </div>
                        </div>
                    </div>

                    <div class="post-content">
                        <?php if ($post['image']): ?>
                        <div class="post-image">
                            <img src="<?php echo '../api/user/' . $post['image']; ?>" 
                                 alt="帖子图片" 
                                 onclick="showImage(this.src)">
                        </div>
                        <?php endif; ?>
                        
                        <div class="post-text">
                            <?php echo nl2br(htmlspecialchars($post['content'])); ?>
                        </div>
                    </div>

                    <div class="post-actions">
                        <a href="post_edit.php?id=<?php echo $post['id']; ?>" class="btn btn-primary">
                            <i class="fas fa-edit"></i> 编辑帖子
                        </a>
                        <a href="javascript:void(0)" onclick="deletePost(<?php echo $post['id']; ?>)" class="btn btn-danger">
                            <i class="fas fa-trash"></i> 删除帖子
                        </a>
                    </div>

                    <div class="comments-section">
                        <h3 class="comments-header">评论列表 (<?php echo count($comments); ?>)</h3>
                        
                        <?php foreach ($comments as $comment): ?>
                        <div class="comment-item">
                            <div class="comment-header">
                                <div class="user-info">
                                    <div class="avatar-container">
                                        <img src="<?php echo $comment['user_avatar'] ? '../api/user/' . $comment['user_avatar'] : 'assets/images/default-avatar.png'; ?>" 
                                             alt="<?php echo htmlspecialchars($comment['user_name']); ?>">
                                    </div>
                                    <div>
                                        <div class="user-name"><?php echo htmlspecialchars($comment['user_name']); ?></div>
                                        <div class="comment-time">
                                            <?php echo date('Y-m-d H:i', strtotime($comment['created_at'])); ?>
                                        </div>
                                    </div>
                                </div>
                                <div class="comment-actions">
                                    <a href="javascript:void(0)" onclick="deleteComment(<?php echo $comment['id']; ?>)" 
                                       class="btn-icon text-danger" title="删除评论">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="comment-content">
                                <?php echo nl2br(htmlspecialchars($comment['content'])); ?>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 图片预览模态框 -->
    <div id="imageModal" class="modal" onclick="this.style.display='none'">
        <img id="modalImage" class="modal-content">
    </div>

    <script>
    function deletePost(id) {
        if (confirm('确定要删除这个帖子吗？相关的评论也会被删除。')) {
            window.location.href = `posts.php?action=delete&id=${id}`;
        }
    }

    function deleteComment(id) {
        if (confirm('确定要删除这条评论吗？')) {
            window.location.href = `comments.php?action=delete&id=${id}&post_id=<?php echo $post['id']; ?>`;
        }
    }

    function showImage(src) {
        const modal = document.getElementById('imageModal');
        const modalImg = document.getElementById('modalImage');
        modal.style.display = "block";
        modalImg.src = src;
    }
    </script>
</body>
</html> 